<template>
	<view class="beijingse">
		<header-top :messageInfo="{typeFlag:true,message:'商品列表',liner:false}"></header-top>
		<view class="mainpadding">
			<!-- 输入框 -->
			<view class="flexleft shuruk" @click="tzsousuo">
				<view class="sousuo margin_right2"></view>
				<input type="text" placeholder="请输入你要搜索的内容" v-model="keyword">
			</view>
			<!-- 商品 -->
			<view class="shanpin">
				<view class="flexbetween margin_top">
					<view :class="current==0?'nofocustext':'focustext'" @click="selectab(0)">综合</view>
					<view class="flexleft"  @click="selectab(1)">
						<view :class="current==1 || current==4?'nofocustext':'focustext'">销量</view>
						<view class="trbox">
							<view class="shangsjx" v-show="current!=1"></view>
							<view class="shangsjxj" v-show="current==1"></view>
							<view class="xiasjx" v-show="current!=4"></view>
							<view class="xiasjxj" v-show="current==4"></view>
						</view>
					</view>
					<view class="flexleft" @click="selectab(2)">
						<view :class="current==2 || current==3?'nofocustext':'focustext'">价格</view>
						<view class="trbox">
							<view class="shangsjx" v-show="current!=2"></view>
							<view class="shangsjxj" v-show="current==2"></view>
							<view class="xiasjx" v-show="current!=3"></view>
							<view class="xiasjxj" v-show="current==3"></view>
						</view>
					</view>
					<view :class="henghshu==1?'hengzhe':'shuzhe'" @click="xuanze()"></view>
					<!-- <view class="hengzhe"></view> -->
				</view>
				<!-- 横着 -->
				<view class="flexbetween flex_wrap" v-if="henghshu==2">
					<view class="shangpinbox margin_top" v-for="item in list.data" :key="item.id"
						@click="todetail(item.id)">
						<view class="toupian">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="mainpadding baisebox ffffff">
							<view class="nostrongtext yhycyc">{{item.name}}</view>
							<view class="miaoshabtn margin_top1" v-if="item.type==2">秒杀</view>
							<view class="miaoshabtn margin_top1" v-if="item.type==1">普通</view>
							<view class="flexbetween margin_top1">
								<view class="qianshutext">￥{{item.price}}</view>
								<view class="gouwuche"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 竖着 -->
				<view class="flexbetween ffffff radius margin_top mainpadding" v-for=" item in list.data" :key="item.id"
					v-if="henghshu==1" @click="todetail(item.id)">
					<view class="zuobox">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class="youbox">
						<view class="strongtext">{{item.name}}</view>
						<view class="huisetext" style="height: 90rpx;margin-top:10rpx">{{item.des?item.des:'暂无'}}</view>
						<view class="flexbetween">
							<view class="qianshutext">￥{{item.price}}</view>
							<view class="gouwuche"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="kym" v-if="!list.data.length">
				<image src="../../static/image/system/zwsp.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 0,
				henghshu: 1,
				type: 1,
				page: 1,
				limit: 10,
				list: {
					data: [],
				},
				orderbyType: 0,
				keyword: '', //关键字
			}
		},
		onLoad(options) {
			console.log(options,"安徽的说法")
			this.keyword = options.text
			let _this = this;
			_this.type = options.type;
			console.log(_this.type)
			_this.getdata();
		},
		methods: {
			//商品详情
			todetail(id) {
				uni.navigateTo({
					url: '/pages/homepage/shangpinxq?id=' + id,
				})
			},
			getdata(isPage, page) {
				let _this = this;
				httpRequest.request('api/goods/goodslist', 'POST', {
					page: page || 1,
					limit: _this.limit,
					orderby: _this.orderbyType,
					keywords: _this.keyword,
					goods_category_id: _this.type,
					type: 0,
				}).then(res => {
					if (res.code == 1) {
						if (res.code == 1) {
							let resList = res.data.data;
							if (isPage == true) {
								_this.list.data.push(...resList);
							} else {
								_this.list = res.data
								_this.list.data = resList;
							}
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.total <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getshoplist(true, page);
			},
			// 跳转搜索页面
			tzsousuo() {
				uni.navigateTo({
					url: '/pages/homepage/sousuo'
				})
			},
			selectab(i) {
				
				if (i == this.current && i != 2 && i != 1) {
					return false
				}
				if(i == 1){
					if (this.current != 1 && this.current != 4) {
						this.current = 1;
						console.log(1)
					} else if (this.current == 1) {
						this.current = 4;
						console.log(2)
					} else if (this.current == 4) {
						this.current = 1;
						console.log(3)
					}
				}else if (i == 2) {
					if (this.current != 2 && this.current != 3) {
						this.current = 2;
					} else if (this.current == 2) {
						this.current = 3;
					} else if (this.current == 3) {
						this.current = 2;
					}
				} else {
					this.current = i;
				}
				if (i == 0) {
					this.orderbyType = 0
				} else if (i == 1) {
					if (this.current == 1) {
						this.orderbyType = 1;
					} else if (this.current == 4) {
						this.orderbyType = 4;
					}
				} else if (i == 2) {
					if (this.current == 2) {
						this.orderbyType = 3;
					} else if (this.current == 3) {
						this.orderbyType = 2;
					}
				}
				this.getdata();
			},
			xuanze() {
				this.henghshu = this.henghshu == 1 ? 2 : 1
			},
		}
	}
</script>
<style lang="scss" scoped>
	.kym{
		margin: 50rpx auto 0;
		width: 319rpx;
		height: 267rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	// 竖着
	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.youbox {
		width: 67%;
	}

	.samllbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 140rpx;
		height: 51rpx;
		background: linear-gradient(90deg, #F65630 0%, #FE6763 100%);
		border-radius: 26rpx;
	}

	.qianshutext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.zuobox {
		width: 29%;
		height: 196rpx;
		border-radius: 11rpx;

		image {
			width: 100%;
			border-radius: 11rpx;
			height: 100%;
		}
	}
</style>
<style lang="scss" scoped>
	// 横着
	.shangpinbox {
		width: 48%;
	}

	.qianshutext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.yhycyc {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.toupian {
		height: 338rpx;
		width: 100%;
		border-radius: 11rpx 11rpx 0 0;

		image {
			border-radius: 11rpx 11rpx 0 0;
			width: 100%;
			height: 100%;
		}
	}
</style>
<style lang="scss" scoped>
	.trbox {
		margin-left: 10rpx;
	}

	.shuzhe {
		width: 33rpx;
		height: 33rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/shuze.png');
	}

	.hengzhe {
		width: 33rpx;
		height: 33rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/hengzhe.png');
	}

	.xiasjx {
		margin-top: 4rpx;
		width: 18rpx;
		height: 12rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/xiasjx.png');
	}

	.shangsjx {
		width: 18rpx;
		height: 12rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/shangsjx.png');
	}

	.xiasjxj {
		margin-top: 4rpx;
		width: 18rpx;
		height: 12rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/xiasjxj.png');
	}

	.shangsjxj {
		width: 18rpx;
		height: 12rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/shangsjxj.png');
	}

	.focustext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nofocustext {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
</style>
